<template>
  <div style="padding: 20px">
    <div class="title_font">
      增加权证员
    </div>
    <el-divider />
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >
    <div class="div_style">
      <el-form-item label="选择用户：" prop="userId">
      <div class="selectUser">
        <el-input v-model="formData.names" readonly placeholder="选择用户" />
        <el-button type="primary" @click="selectUserFun">选择用户</el-button>
      </div>
      
    </el-form-item>

      <!-- <el-form-item label="选择用户" prop="userId">

        <el-select v-model="formData.userId"  placeholder="请选择">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->

    </div>
<!--    <div class="div_style">-->
<!--      <el-form-item label="账户状态" prop="status">-->
<!--        <el-select-->
<!--          v-model="formData.status"-->
<!--          placeholder="账户状态"-->
<!--          clearable-->
<!--          class="!w-240px"-->
<!--        >-->
<!--          <el-option-->
<!--            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"-->
<!--            :key="dict.value"-->
<!--            :label="dict.label"-->
<!--            :value="dict.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--    </div>-->
    <div class="div_style">
      <el-form-item label="登录名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入"
                  onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
                  style="width: 400px;height: 30px" />
      </el-form-item>
    </div>
    <div class="div_style">
      <el-form-item label="登录密码" prop="password">
        <el-input v-model="formData.password" placeholder="请输入" style="width: 400px;height: 30px" />
      </el-form-item>
    </div>
    </el-form>
    <div class="button_styles">
      <button class="add_button" @click="submitForm">添 加</button>
<!--      <button class="chance_button">取消</button>-->
    </div>
    <el-dialog
      v-model="selectUser"
      title="选择用户"
      width="45%"
      center
      :before-close="handleClose"
    >
    <div>
      <el-input v-model="userMobile" type="number" maxlength="11" style="width: 200px" placeholder="输入手机号" />
      <el-input v-model="userName" style="width: 100px;margin: 0 10px;" placeholder="输入姓名" />
      <el-button type="success" @click="screen">搜索</el-button>
      <el-button type="info" @click="reSet">重置</el-button>
    </div>
    <div class="userList">
      <el-table :data="screenList" stripe style="width: 100%">
        <el-table-column prop="nickname" label="用户" width="170" />
        <el-table-column prop="name" label="姓名" width="170" />
        <el-table-column prop="mobile" label="手机号" width="170" />
        <el-table-column prop="mobile" label="操作" width="170">
          <template #default="scope">
            <el-button type="primary" @click="selectMan(scope.row.id,scope.row.name,scope.row.nickname)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagesChange">
        <Pagination
        :total="total"
        v-model:page="pages"
        v-model:limit="pageSize"
        @pagination="selectUserFun"
      />
    </div>
    </el-dialog>
  </div>

</template>
<script lang="ts" setup>
import * as UsersApi from '@/api/hutai/certificateHolder'

import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { getUserPages } from "@/api/hutai/salesman";
import * as PublicInterface from "@/api/guardPage/publicInterface";

const message = useMessage() // 消息弹窗
const selectUser = ref(false);
const userMobile = ref('')
const userName = ref('')
const total = ref(0)
let pages = ref('1')
let pageSize = ref('10')

const formRules = reactive({
  userId: [{ required: true, message: '用户不能为空', trigger: 'blur' }],
  // status: [{ required: true, message: '帐号状态不能为空', trigger: 'blur' }],
  username: [{ required: true, message: '登录名不能为空', trigger: 'blur' }, { min: 4, message: '登录名至少输入4个字符', trigger: 'blur' }],
  password: [{ required: true, message: '登录密码不能为空', trigger: 'blur' }],

})
const formRef = ref() // 表单 Ref

const userList = ref([]) // 用户列表


const formData = ref({
  names:undefined,
  userId:undefined,
  username: undefined,
  password: undefined,
  status : undefined
})



/** 初始化 **/
onMounted(() => {
//  getList();
})

const getList = async ()=>{
  userList.value = await UsersApi.getUserTwoList();
}

const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  try {
    const data = formData.value
    data.userType = 3
    await PublicInterface.addUsers(data)
    console.log(data)
    message.success('添加成功')
    resetForm()
    getList()
  } finally {

  }
}

//筛选
const screen = async() => {
  let list = await getUserPages(pages.value,10,'1',userName.value,userMobile.value)
  screenList.value = list.list
}
//重置
const reSet = async() => {
  userMobile.value = ''
  userName.value = ''
  let list = await getUserPages(pages.value,10,'1',userName.value,userMobile.value)
  screenList.value = list.list
}

//获取用户列表
const screenList = ref ([])
const selectUserFun = async() => {
  selectUser.value = true
  let list = await getUserPages(pages.value,10,'1',userName.value,userMobile.value)
  total.value = list.total
  screenList.value = list.list
}

//选择
const selectMan = (id,name,nickName) => {
  selectUser.value = false
  formData.value.userId = id
  if (name==undefined || name==null || name==''){
    formData.value.names = nickName
  }else {
    formData.value.names = name
  }

}


/** 重置表单 */
const resetForm = () => {
  formData.value = {
    userId: undefined,
    username: undefined,
    password: undefined,
    status : undefined
  }
  formRef.value?.resetFields()
}

</script>
<style lang="scss">
.button_styles{
  margin-top: 20px;

  .add_button{
    width: 100px;
    height: 30px;
    font-weight: 500;
    color: white;
    background-color: #165dff;
    border: 0;
    border-radius: 3px;
  }

  .chance_button{
    width: 100px;
    height: 30px;
    margin-left: 20px;
    font-weight: 500;
    background-color: white;
    border: 1px solid black;
    border-radius: 3px;
  }
}

.div_style{
  margin-top: 10px;
}

.item_font{
  float: left;
  width: 60px;
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
}

.title_font{
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}
</style>
